<template>
  <div class="statistics">
    <div class="page-header">
      <h1 class="page-title">数据统计</h1>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
        />
        <el-button type="primary" @click="exportData">
          <i class="fas fa-download mr-2"></i>导出数据
        </el-button>
        <el-button type="primary" @click="refreshData">
          <i class="fas fa-sync-alt mr-2"></i>刷新
        </el-button>
      </div>
    </div>

    <!-- 核心指标 -->
    <div class="metrics-section">
      <div class="metric-card revenue">
        <div class="metric-icon">
          <i class="fas fa-dollar-sign"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value">¥{{ metrics.totalRevenue.toLocaleString() }}</div>
          <div class="metric-label">总收入</div>
          <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>+12.5%</span>
          </div>
        </div>
      </div>
      
      <div class="metric-card cases">
        <div class="metric-icon">
          <i class="fas fa-gavel"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ metrics.totalCases }}</div>
          <div class="metric-label">总案件数</div>
          <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>+8.3%</span>
          </div>
        </div>
      </div>
      
      <div class="metric-card clients">
        <div class="metric-icon">
          <i class="fas fa-users"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ metrics.totalClients }}</div>
          <div class="metric-label">总客户数</div>
          <div class="metric-change positive">
            <i class="fas fa-arrow-up"></i>
            <span>+15.2%</span>
          </div>
        </div>
      </div>
      
      <div class="metric-card lawyers">
        <div class="metric-icon">
          <i class="fas fa-user-tie"></i>
        </div>
        <div class="metric-content">
          <div class="metric-value">{{ metrics.totalLawyers }}</div>
          <div class="metric-label">律师数量</div>
          <div class="metric-change neutral">
            <i class="fas fa-minus"></i>
            <span>0%</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="charts-section">
      <div class="chart-row">
        <!-- 收入趋势图 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">收入趋势</h3>
            <el-radio-group v-model="revenueChartPeriod" size="small">
              <el-radio-button label="7d">7天</el-radio-button>
              <el-radio-button label="30d">30天</el-radio-button>
              <el-radio-button label="90d">90天</el-radio-button>
            </el-radio-group>
          </div>
          <div class="chart-content">
            <div class="chart-placeholder">
              <i class="fas fa-chart-line"></i>
              <p>收入趋势图表</p>
            </div>
          </div>
        </div>

        <!-- 案件类型分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">案件类型分布</h3>
          </div>
          <div class="chart-content">
            <div class="pie-chart-data">
              <div v-for="item in caseTypeData" :key="item.type" class="pie-item">
                <div class="pie-color" :style="{ backgroundColor: item.color }"></div>
                <div class="pie-info">
                  <span class="pie-label">{{ item.type }}</span>
                  <span class="pie-value">{{ item.count }}件 ({{ item.percentage }}%)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="chart-row">
        <!-- 客户增长趋势 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">客户增长趋势</h3>
          </div>
          <div class="chart-content">
            <div class="chart-placeholder">
              <i class="fas fa-chart-area"></i>
              <p>客户增长趋势图表</p>
            </div>
          </div>
        </div>

        <!-- 律师工作量统计 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">律师工作量统计</h3>
          </div>
          <div class="chart-content">
            <div class="lawyer-stats">
              <div v-for="lawyer in lawyerStats" :key="lawyer.id" class="lawyer-item">
                <div class="lawyer-info">
                  <span class="lawyer-name">{{ lawyer.name }}</span>
                  <span class="lawyer-cases">{{ lawyer.cases }}件</span>
                </div>
                <div class="lawyer-progress">
                  <div class="progress-bar" :style="{ width: lawyer.percentage + '%' }"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <div class="section-header">
        <h2 class="section-title">详细统计数据</h2>
        <el-tabs v-model="activeTab" class="data-tabs">
          <el-tab-pane label="案件统计" name="cases">
            <el-table :data="caseStats" style="width: 100%">
              <el-table-column prop="type" label="案件类型" width="150"></el-table-column>
              <el-table-column prop="total" label="总数量" width="100" align="center"></el-table-column>
              <el-table-column prop="completed" label="已完成" width="100" align="center"></el-table-column>
              <el-table-column prop="pending" label="进行中" width="100" align="center"></el-table-column>
              <el-table-column prop="revenue" label="收入" width="150" align="center">
                <template #default="{ row }">
                  <span class="text-green-600 font-semibold">¥{{ row.revenue.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgDuration" label="平均处理时间" width="150" align="center"></el-table-column>
              <el-table-column prop="successRate" label="成功率" width="100" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.successRate >= 90 ? 'success' : row.successRate >= 70 ? 'warning' : 'danger'">
                    {{ row.successRate }}%
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          
          <el-tab-pane label="客户统计" name="clients">
            <el-table :data="clientStats" style="width: 100%">
              <el-table-column prop="region" label="地区" width="120"></el-table-column>
              <el-table-column prop="newClients" label="新客户" width="100" align="center"></el-table-column>
              <el-table-column prop="activeClients" label="活跃客户" width="100" align="center"></el-table-column>
              <el-table-column prop="totalSpent" label="总消费" width="150" align="center">
                <template #default="{ row }">
                  <span class="text-green-600 font-semibold">¥{{ row.totalSpent.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="avgSpent" label="平均消费" width="150" align="center">
                <template #default="{ row }">
                  <span>¥{{ row.avgSpent.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="satisfaction" label="满意度" width="100" align="center">
                <template #default="{ row }">
                  <el-rate v-model="row.satisfaction" disabled show-score text-color="#ff9900" score-template="{value}"></el-rate>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>

          <el-tab-pane label="财务统计" name="finance">
            <el-table :data="financeStats" style="width: 100%">
              <el-table-column prop="month" label="月份" width="100"></el-table-column>
              <el-table-column prop="income" label="收入" width="150" align="center">
                <template #default="{ row }">
                  <span class="text-green-600 font-semibold">¥{{ row.income.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="expenses" label="支出" width="150" align="center">
                <template #default="{ row }">
                  <span class="text-red-600">¥{{ row.expenses.toLocaleString() }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="profit" label="利润" width="150" align="center">
                <template #default="{ row }">
                  <span :class="row.profit >= 0 ? 'text-green-600' : 'text-red-600'" class="font-semibold">
                    ¥{{ row.profit.toLocaleString() }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="profitMargin" label="利润率" width="100" align="center">
                <template #default="{ row }">
                  <el-tag :type="row.profitMargin >= 30 ? 'success' : row.profitMargin >= 15 ? 'warning' : 'danger'">
                    {{ row.profitMargin }}%
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'AdminStatistics',
  setup() {
    const dateRange = ref([])
    const revenueChartPeriod = ref('30d')
    const activeTab = ref('cases')
    
    // 交通事故案件核心指标
    const metrics = reactive({
      totalRevenue: 3850000,  // 交通事故案件总收入
      totalCases: 1856,       // 交通事故案件总数
      totalClients: 2156,     // 交通事故当事人数
      totalLawyers: 28        // 交通事故专业律师数
    })
    
    // 交通事故案件类型分布
    const caseTypeData = ref([
      { type: '机动车交通事故', count: 856, percentage: 46.1, color: '#ef4444' },
      { type: '非机动车交通事故', count: 456, percentage: 24.6, color: '#f59e0b' },
      { type: '人身损害赔偿', count: 324, percentage: 17.5, color: '#10b981' },
      { type: '财产损害赔偿', count: 156, percentage: 8.4, color: '#3b82f6' },
      { type: '交通肇事刑事', count: 64, percentage: 3.4, color: '#8b5cf6' }
    ])
    
    // 交通事故专业律师统计
    const lawyerStats = ref([
      { id: 1, name: '李卫民律师', cases: 156, percentage: 94 }, // 交通事故专家
      { id: 2, name: '王志强律师', cases: 128, percentage: 91 }, // 保险理赔专家
      { id: 3, name: '张医法律师', cases: 98, percentage: 89 },  // 医疗损害专家
      { id: 4, name: '陈红律师', cases: 86, percentage: 87 },   // 人身损害专家
      { id: 5, name: '刘建国律师', cases: 76, percentage: 92 }  // 资深交通律师
    ])
    
    // 交通事故案件统计详情
    const caseStats = ref([
      {
        type: '机动车交通事故',
        total: 856,
        completed: 768,
        pending: 88,
        revenue: 1850000,
        avgDuration: '65天',
        successRate: 94
      },
      {
        type: '非机动车交通事故',
        total: 456,
        completed: 398,
        pending: 58,
        revenue: 890000,
        avgDuration: '42天',
        successRate: 89
      },
      {
        type: '人身损害赔偿',
        total: 324,
        completed: 298,
        pending: 26,
        revenue: 956000,
        avgDuration: '78天',
        successRate: 91
      },
      {
        type: '财产损害赔偿',
        total: 156,
        completed: 142,
        pending: 14,
        revenue: 456000,
        avgDuration: '35天',
        successRate: 87
      },
      {
        type: '交通肇事刑事',
        total: 64,
        completed: 56,
        pending: 8,
        revenue: 698000,
        avgDuration: '120天',
        successRate: 85
      }
    ])
    
    const clientStats = ref([
      {
        region: '北京',
        newClients: 156,
        activeClients: 892,
        totalSpent: 1250000,
        avgSpent: 1401,
        satisfaction: 4.5
      },
      {
        region: '上海',
        newClients: 134,
        activeClients: 756,
        totalSpent: 980000,
        avgSpent: 1296,
        satisfaction: 4.3
      },
      {
        region: '深圳',
        newClients: 98,
        activeClients: 623,
        totalSpent: 820000,
        avgSpent: 1316,
        satisfaction: 4.4
      }
    ])
    
    const financeStats = ref([
      {
        month: '2024-01',
        income: 450000,
        expenses: 280000,
        profit: 170000,
        profitMargin: 37.8
      },
      {
        month: '2024-02',
        income: 520000,
        expenses: 320000,
        profit: 200000,
        profitMargin: 38.5
      },
      {
        month: '2024-03',
        income: 480000,
        expenses: 290000,
        profit: 190000,
        profitMargin: 39.6
      }
    ])
    
    const exportData = () => {
      alert('导出数据功能开发中...')
    }
    
    const refreshData = () => {
      alert('数据已刷新')
    }
    
    return {
      dateRange,
      revenueChartPeriod,
      activeTab,
      metrics,
      caseTypeData,
      lawyerStats,
      caseStats,
      clientStats,
      financeStats,
      exportData,
      refreshData
    }
  }
}
</script>

<style scoped>
.statistics {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.date-picker {
  width: 240px;
}

.metrics-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.metric-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  border-left: 4px solid #e5e7eb;
}

.metric-card.revenue {
  border-left-color: #10b981;
}

.metric-card.cases {
  border-left-color: #3b82f6;
}

.metric-card.clients {
  border-left-color: #f59e0b;
}

.metric-card.lawyers {
  border-left-color: #8b5cf6;
}

.metric-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #6b7280;
}

.metric-content {
  flex: 1;
}

.metric-value {
  font-size: 32px;
  font-weight: bold;
  color: #1f2937;
  line-height: 1;
}

.metric-label {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
  margin-bottom: 8px;
}

.metric-change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.metric-change.positive {
  color: #10b981;
}

.metric-change.negative {
  color: #ef4444;
}

.metric-change.neutral {
  color: #6b7280;
}

.charts-section {
  margin-bottom: 32px;
}

.chart-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.chart-card {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
  color: #1f2937;
  margin: 0;
}

.chart-content {
  min-height: 200px;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 8px;
  border: 2px dashed #d1d5db;
}

.chart-placeholder i {
  font-size: 48px;
  margin-bottom: 12px;
}

.pie-chart-data {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pie-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pie-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.pie-info {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pie-label {
  font-weight: 500;
  color: #1f2937;
}

.pie-value {
  color: #6b7280;
  font-size: 14px;
}

.lawyer-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lawyer-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lawyer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lawyer-name {
  font-weight: 500;
  color: #1f2937;
}

.lawyer-cases {
  color: #6b7280;
  font-size: 14px;
}

.lawyer-progress {
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #1d4ed8);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.table-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.section-header {
  margin-bottom: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.data-tabs {
  margin-top: 16px;
}
</style> 